<template>
  <div class="user">
    <div class="header-box">
      <div class="header-info">
        <div class="img-box">
          <el-image
            style="width: 70px; height: 70px"
            v-if="imageUrl"
            :src="imageUrl"
            fit="cover"
          ></el-image>
          <img
            v-else
            class="defind"
            src="@/assets/images/userCenter/header_img.png"
          />
        </div>
        <h1 class="user-name">{{ userInfo.name }}</h1>
        <div class="user-phone">
          <el-upload
            border
            class="avatar-uploader"
            action="api/upload-img"
            name="file"
            list-type="picture"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="onSuccess"
            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
            :limit="1"
            :before-upload="beforeAvatarUpload"
          >
            <span>更换头像</span>
          </el-upload>
          <p>手机号码：{{ userInfo.phone }}</p>
        </div>
        <div class="email">
          邮箱：
          {{ userInfo.email }}
        </div>
        <div class="header-set">
          <div class="set-item" @click="changePassword()">修改密码</div>
          |
          <div class="set-item" @click="loginOut()">退出登录</div>
        </div>
      </div>
    </div>

    <div class="tabs">
      <div
        class="list-item"
        v-for="item in titleList"
        :key="item.title"
        :class="item.link_addr == $route.name ? 'active' : ''"
        @click="changeTab(item)"
      >
        <span
          ><img class="show" :src="item.image_show" alt="" />{{
            item.title
          }}</span
        >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";

export default {
  components: {},
  data() {
    return {
      titleList: [
        {
          link_addr: "user-center-info",
          title: "信息预览",
          image_show: require("@/assets/images/userCenter/icon_show_1.png"),
        },
        {
          link_addr: "company-info",
          title: "完善公司信息",
          image_show: require("@/assets/images/userCenter/icon_show_2.png"),
        },
        {
          link_addr: "team-info",
          title: "完善团队信息",
          image_show: require("@/assets/images/userCenter/icon_show_3.png"),
        },
        {
          link_addr: "project-info",
          title: "完善项目信息",
          image_show: require("@/assets/images/userCenter/icon_show_4.png"),
        },
        {
          link_addr: "upload-file",
          title: "材料上传",
          image_show: require("@/assets/images/userCenter/icon_show_6.png"),
        },
        {
          link_addr: "change-phone",
          title: "修改参赛账户手机号",
          image_show: require("@/assets/images/userCenter/icon_show_5.png"),
        },
      ],
      imageUrl: "",
      myHeaders: {
        Accept: "application/json",
        Authorization: "Bearer  " + localStorage.getItem("token"),
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["getUserInfo", "clearLogin"]),
    init() {
      this.getUserInfo().then((res) => {
        this.imageUrl = this.userInfo.pic_url;
      });
    },
    changeTab(item) {
      this.$router.push({
        name: "wap-" + item.link_addr,
      });
    },
    changePassword() {
      this.$router.push({
        name: "wap-change-password",
      });
    },
    loginOut() {
      this.clearLogin().then((res) => {
        this.$router.push({
          name: "wap-index",
        });
      });
    },
    onSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt5M;
    },
    uploadFilePath(uploadFilePath) {
      this.imageUrl = uploadFilePath;
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  background: #ededed;
}
.header-box {
  width: 100%;
  height: 190px;
  background: url("../../../assets/images/userCenter/user_header_bg.png")
    no-repeat;
  background-size: 100%;
  position: relative;
  margin-bottom: 55px;
}
.header-info {
  width: 94%;
  background: #f9f9f9;
  border-radius: 19px;
  position: absolute;
  left: 3%;
  top: 50px;
  text-align: center;
}
.header-box .img-box {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin: -35px auto 10px;
  border: 1px solid #f9f9f9;
}
.header-box .img-box img {
  width: 100%;
}
.user-name {
  margin: 10px auto;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}
.user-phone span {
  width: 60px;
  height: 20px;
  border: 1px solid #0b4696;
  border-radius: 10px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  color: #0b4696;
  line-height: 20px;
  margin-right: 5px;
  display: inline-block;
}
.user-phone p {
  display: inline-block;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.email {
  height: 30px;
  background: #328dff;
  border-radius: 30px;
  padding: 0 30px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  display: inline-block;
  margin: 10px auto;
}
.header-set {
  width: 250px;
  height: 36px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666;
  line-height: 36px;
  text-align: center;
  margin: 0 auto 20px;
  display: flex;
}
.set-item {
  flex: 1;
}
.tabs {
  padding: 20px 3% 70px;
}
.list-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  color: #333;
  font-size: 15px;
  margin-top: 15px;
  box-sizing: border-box;
  align-items: center;
}
.list-item img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}
.avatar-uploader {
  display: inline-block;
}
</style>